* {
    margin: 0;
    padding: 0;
}
.box() {
    display: flex;
    display: -webkit-flex;
}
li {
    list-style: none;
}

.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}
.padding01(@top) {
    .px2rem(padding-top,@top);
}
.padding02(@bottom) {
    .px2rem(padding-bottom,@bottom);
}
.padding03(@left) {
    .px2rem(padding-left,@left);
}
.padding04(@right) {
    .px2rem(padding-right,@right);
}
header {
    
    .px2rem(height,98);
    background: linear-gradient(#ec0000,#a70000);
    .top {
        overflow: hidden;
        width: 100%;
        .box();
        .px2rem(height,98);

        justify-content: center;
        background-image: url("../img/7-01.png");
        background-repeat:no-repeat ;
        .px2rem(background-position-x,20);
        background-position-y:center;
         
        span {
            .px2rem(margin-top,20);
            .px2rem(font-size,35);
            display: block;
            font-weight: bold;
            .px2rem(width,150);
            text-align: center;
            .px2rem(height,60);
            .px2rem(line-height,60);
            .px2rem(border-radius,15);
            .px2rem(margin-right,10);
            background: linear-gradient(#ef6565,#af1b1b);
            color: #FFFFFF;
        }
        span.curr {
            background: linear-gradient(#efefef,#999999);
            color: #000;
        }
    }
    .bottom{
        div.curr{
            display: block;
        }
        div{
            display: none;
            ul{
               
             
                li{
                   
                    .box();
                    font-weight: bold;
                    flex-flow: column;
                    justify-content: center;
                    .px2rem(padding-top,20);
                    .px2rem(padding-bottom,20);
                    .px2rem(height,90);
                    .px2rem(font-size,38);
                    .px2rem(text-indent,24);
                }
                li:nth-child(odd){
                    background: #ededed;
                }
               
            }
        }
       
        div.btm_di{
          
            p{
                 .px2rem(font-size,45);
                  .px2rem(letter-spacing,5);
                .px2rem(margin-bottom,10);
            }
            span{
                font-weight: normal;
            }
        }
         
    }
}
footer {
    .px2rem(height,98);
    background: #000;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    ul {
        .px2rem(height,98);
        align-items: center; 
        justify-content: space-around;
        .box();
        li {
            .box();
            flex-flow: column;
            align-items: center;
            a {
                display: block;
                color: #FFFFFF;
                .px2rem(font-size,30);
            }
        }
        li:first-child {
            img {
                display: block;
                width: 90%;
            }
        }
    }
}